<template>
	<div class="pageAHome">
		<div class="home_top">
			<div class="home_top_img">
				<image src="@/static/image/pageA/page.png"></image>
			</div>
			<div class="home_top_title" @click='urlEvent()'>
				苏江之家
			</div>
			<div class="home_top_cont">
				<!-- @click='myEvnet()' -->
				<div class="home_top_cont_top" v-if="isLogin">
					<div class="home_top_cont_act" @click='myEvnet()'>
						<image :src="userInfo.avatar_url"></image>
					</div>
					<div class="home_top_cont_name">
						欢迎您, <span>{{userInfo.name || ''}}</span>
					</div>
					<div class="home_top_cont_dis">
						<!-- 在苏江的第<span>20</span>天 -->
						<!-- <div class="home_top_cont_dis_btn" @click='inviteEvent'>邀约处理 ></div> -->
					</div>
				</div>

				<div class="home_top_cont_top" v-else @click='goLogin()'>
					<div class="home_top_cont_act">

					</div>
					<div class="home_top_cont_name">
						点击注册/登录
					</div>
					<div class="home_top_cont_dis">
						登录后即可享受更多服务
					</div>
				</div>

				<div class="home_top_cont_icon">
					<div class="home_top_cont_items" v-for="(ite,idx) in list" :key="idx">
						<div class="home_top_cont_items_img">
							<!-- <image :src="ite.img" mode=""></image> -->
							{{ite.num}}
						</div>
						<div class="home_top_cont_items_text">
							{{ite.name}}
						</div>

					</div>
				</div>
				<!-- 公告 -->
				<!-- <div class="home_top_cont_gg">
					<div class="home_top_cont_gg_center">
						<span>通知公告</span> | 亚运会支持 苏江传媒将大力发展
					</div>
				</div> -->

				<!-- 	<div class="home_top_cont_gg">
					<div class="home_top_cont_gg_center">
						<span>通知公告</span> |
						<swiper class="notice-swiper" :circular="true" autoplay="true" interval="3000" duration="500">
							<swiper-item v-for="(ite,idx) in userInfo.notice" :key="idx">
								<view class="notice-item ex"><u-notice-bar :text="ite"></u-notice-bar></view>
								
							</swiper-item>
							 
						</swiper>

					</div>
				</div> -->
			</div>
		</div>
		<!-- table -->
		<div class="tab">
			<div class="tab_left">
				<div :class="idx == tabIndex?'tabItems tabItemsAct':'tabItems' " v-for="(ite,idx) in tabList" :key="idx"
					@click='tabEvent(idx)'>
					{{ite.name}}
					<div class="tabItemsLine" v-if="idx == tabIndex" :class="idx == 2?'tabItemsLines':''">

					</div>
				</div>
			</div>
			<div class="tab_right" @click='moreList()'>
				更多<u-icon slot="right" name="arrow-right" color='#666666'></u-icon>
			</div>
		</div>
		<!-- list -->
		<div class="pagesList">
			<page-list :list='indexList' @upData='upData'></page-list>
		</div>
		<div id="tabar">
			<tabar :value4='0'></tabar>
		</div>
		<!-- right -->
		<div class="rightBtn">
			<u-icon name="plus-circle-fill" color="#2E61FF" size="48" @click='addServerEvent'> </u-icon>

		</div>

		<!-- 下拉 -->
		<u-picker :show="show" :closeOnClickOverlay='true' @close='cancel' :columns="columns" @confirm='confirm'
			@cancel='cancel' keyName="label"></u-picker>


	</div>

</template>

<script>
	import tabar from '@/pagesA/components/tabar.vue'
	import pageList from '@/pagesA/components/list.vue'
	export default {
		components: {
			tabar,
			pageList
		},
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					id: 0,
					name: '今日待办'
				}, {
					id: 0,
					name: '明日待办'
				}, {
					id: 0,
					name: '未来一周待办'
				}],
				list: [{
						name: '待入住',
						num: '0'
					},
					{
						name: '换房间',
						num: '0'
					},
					{
						name: '回线上',
						num: '0'
					},
					// {
					// 	name: '待搬家',
					// 	num: '0'
					// },
					// {
					// 	name: '待搬离',
					// 	num: '0'
					// },
					// {
					// 	name: '入住率',
					// 	num: '0'
					// }
				],
				userInfo: {},
				isLogin: true,
				status: 1,
				page: 1,
				indexList: [],
				show: false,
				columns: [
					[{
						label: '保洁工单',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '报修工单',
						id: 2
					}, {
						label: '自定义工单',
						id: 3
					}, ]
				],
			}
		},
		onReachBottom() {
			this.page++
			this.getIndexsList()
		},
		onShow() {
			!uni.getStorageSync("phone") ? this.isLogin = false : this.isLogin = true
		},
		mounted() {
			this.getIndexInfo()
			this.getIndexsList()
			// var num = 0
			// for (var i = 1; i <= 30; i++) {
			// 	console.log(i)
			// 	num += 30 * Number(i)
			// }
			// console.log("11111111", num)
		},
		methods: {
			addServerEvent() {
				this.show = true
			},
			confirm(e) {
				this.show = false
				if (e.value[0].id == 1) {
					uni.navigateTo({
						url: '/pagesA/index/server/upDataServe?type=' + e.value[0].id
					})
				} else {
					uni.navigateTo({
						url: '/pagesA/index/server/updateZDY?type=' + e.value[0].id
					})
				}
				console.log(e.value[0].id)
			},
			cancel() {
				this.show = false
			},
			moreList() {
				uni.navigateTo({
					url: "/pagesA/index/myGd"
				})
			},
			upData() {
				this.page = 1
				this.indexList = []
				this.getIndexsList()
			},
			myEvnet() {
				uni.navigateTo({
					url: '/pagesA/index/info'
				})
			},
			goLogin() {
				uni.reLaunch({
					url: '/pages/login'
				})
			},
			tabEvent(idx) {
				this.tabIndex = idx
				this.status = idx + 1
				this.page = 1
				this.indexList = []
				this.getIndexsList()
			},
			// api/indexs/index
			async getIndexInfo() {
				const {
					data
				} = await this.$request(this.$Api.indexsIndex, {

				}, "POST")
				if (data.code !== 0) return
				this.userInfo = data.data
				this.list[0].num = data.data.v2
				this.list[1].num = data.data.v7
				this.list[2].num = data.data.v8
				// this.list[3].num = data.data.v4
				// this.list[4].num = data.data.v5
				// this.list[5].num = data.data.v6
			},
			//getIndexsList
			async getIndexsList() {
				const {
					data
				} = await this.$request(this.$Api.indexsList, {
					page: this.page,
					status: this.status
				}, "POST")
				if (data.code !== 0) return
				this.indexList = this.indexList.concat(data.data.list)
			}

		}
	}
</script>

<style lang="scss">
	.pageAHome {
		padding-bottom: 200rpx;
	}

	.rightBtn {
		position: fixed;
		right: 30rpx;
		bottom: 15%;
		z-index: 999;
	}

	.tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 38rpx;
		box-sizing: border-box;
		height: 140rpx;
		// margin-top: 125rpx;

		.tab_left {
			display: flex;
			align-items: center;
			font-size: 24rpx;

			color: #999999;

			.tabItems {
				margin-right: 24rpx;
				position: relative;
			}

			.tabItemsAct {
				color: #2E61FF;
				font-weight: bold;
				font-size: 28rpx;
			}

			.tabItemsLine {
				width: 74rpx;
				// height: 2rpx;
				border: 4rpx solid #2E61FF;
				position: absolute;
				left: 10%;
				bottom: -18rpx;
			}

			.tabItemsLines {
				left: 26%;
			}

		}

		.tab_right {
			font-size: 28rpx;
			color: #666;
			display: flex;


		}
	}

	.pagesList {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;

	}

	.home_top {
		width: 750rpx;
		height: 580rpx;
		position: relative;
		// background: url('https://wx.sjcmhz.com/static/image/index15.png');
		// background-size: cover;

		.home_top_img {
			image {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.home_top_title {
			font-size: 60rpx;
			color: #fff;
			position: absolute;
			top: 126rpx;
			left: 30rpx;
		}

		.home_top_cont {
			position: absolute;
			top: 252rpx;
			left: 30rpx;
			width: 690rpx;
			height: 330rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 16rpx 10rpx rgba(36, 95, 255, 0.06);
			border-radius: 12rpx;
			padding: 35rpx 0;
			box-sizing: border-box;


			// overflow: hidden;
			.home_top_cont_top {
				padding: 0 34rpx;
				box-sizing: border-box;
				position: relative;

				.home_top_cont_act {
					position: absolute;
					width: 160rpx;
					height: 160rpx;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
					border: 8rpx solid rgba(255, 255, 255, 0.96);
					right: 56rpx;
					top: -120rpx;
					border-radius: 50%;
					background: #999;
					z-index: 999;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			.home_top_cont_icon {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 6rpx;
			}

			// align-items: center;
			// justify-content: space-between;
			.home_top_cont_name {
				width: 386rpx;
				height: 56rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 40rpx;
				color: #333333;
				line-height: 56rpx;
				text-align: left;
				font-style: normal;

				span {
					font-size: 28rpx;
				}
			}

			.home_top_cont_dis {
				width: 100%;
				height: 40rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 40rpx;
				text-align: right;
				font-style: normal;
				display: flex;
				margin-top: 14rpx;
				line-height: 50rpx;

				span {
					color: #9013FE;
				}
			}

			.home_top_cont_dis_btn {
				width: 154rpx;
				height: 42rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 2rpx solid #EF021F;
				font-size: 24rpx;
				text-align: center;
				color: #EF021F;
				line-height: 42rpx;
				margin-left: 12rpx;
			}

			.home_top_cont_items {
				width: 33%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: flex-start;
				margin-top: 36rpx;

				.home_top_cont_items_img {
					width: 106rpx;
					height: 56rpx;
					font-size: 40rpx;
					text-align: center;
				}

				.home_top_cont_items_text {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					margin-top: 12rpx;
				}

				image {
					width: 100%;
					height: 106rpx;
				}
			}

			.home_top_cont_gg {
				width: 100%;
				padding: 0 34rpx;
				box-sizing: border-box;
				background: #FFF6F1;
				margin-top: 60rpx;
				border-radius: 12rpx;
				box-shadow: 0rpx 12rpx 16rpx 10rpx rgba(36, 95, 255, 0.06);




				.home_top_cont_gg_center {
					width: 100%;
					height: 98rpx;
					font-size: 28rpx;
					line-height: 98rpx;
					position: relative;
					overflow: hidden;

					span {
						color: #DC8900;
						margin-right: 12rpx;
					}

				}
			}
		}
	}
</style>